<template>
  <div class="container mobile-resource-detail">
    <van-cell :title="fileDetail.title" is-link arrow-direction="down" @click="show=true" value="详情" />
    <div class="scrollbar" style="height:77vh;">
      <div class="traingplan">
        <dl v-for="(item, index) in tableData" :key="index" class="traingplan-group">
          <dt>
          <div class="traingplan-img-group">
            <img :src="item.cover_image?item.cover_image:mrtImg" />
          </div>
          <p style="padding:4px 10px;font-size:12px;color:#888;">{{item.title}}</p>
          <p style="display:flex;align-items: center;justify-content: space-between;padding:4px 10px;">
            <span style="font-size:12px;color:#888;">下载：{{item.download_num}}</span>
            <el-button size="mini" type="primary" @click="handleViews(item,index)">预览</el-button>
          </p>
          </dt>
        </dl>
      </div>
      <not-find v-if="tableData.length==0"></not-find>
    </div>
    <div style="padding:10px;">
      <van-pagination v-model="query.pageIndex" :page-count="Math.ceil(query.total/query.pageSize)" mode="simple" @change="initAjaxMethod" />
    </div>
    <van-overlay :show="dialog" >
      <div class="video-groups">
         <video :src="originalVideo" autoplay controls style="width:100%;height:auto;max-height:400px;" ref="originaVideo"></video>
         <div class="video-close" @click="originaClose">
           <van-icon size="45" name="close" color="#ffffff" />
         </div>
      </div>
  </van-overlay>
    <van-action-sheet v-model="show" title="标题">
      <div class="content">
          <van-cell-group>
            <van-cell title="名称" :value="fileDetail.title" />
            <van-cell title="素材格式" :value="fileDetail.file_type" />
            <van-cell title="素材大小" :value="fileDetail.file_size" />
            <van-cell title="素材像素" :value="fileDetail.file_info" />
            <van-cell title="上传者" :value="fileDetail.account" />
            <van-cell title="上传时间" :value="fileDetail.create_time" />
            <van-cell title="总下载次数" :value="fileDetail.download_num" />
            <van-cell title="拍摄时间" :value="fileDetail.shooting_time" /> 
            <van-cell title="说明" :value="fileDetail.content" />
            <van-cell title="标签">
              <template>
                <van-tag :color="item.iswarn?'red':'#1989fa'" style="margin:0 4px 4px 0" plain v-for="(item,index) in category" :key="index">{{item.title}}</van-tag>
              </template>
            </van-cell>
            <p style="color:red;margin-top:30px;" v-if="categoryString">本素材包含敏感内容“{{categoryString}}”,使用时请注意分辨!</p>
          </van-cell-group>
      </div>
    </van-action-sheet>
    <van-image-preview v-model="dialogVisible" :images="imgList" :start-position="imgIndex" showIndex />
  </div>
</template>
<script>
import notFind from "@/view/common/notFind";
import mrtImg from "@/assets/img/mrt.png";
import {Icon,Popup,Toast,DropdownMenu, DropdownItem,Button,Pagination,ActionSheet,Cell,Tag,CellGroup,Overlay} from 'vant';
export default {
  name: "resourceEdit",
  components:{notFind,[Overlay.name]:Overlay,[Tag.name]:Tag,[CellGroup.name]:CellGroup,[Icon.name]:Icon,[Popup.name]: Popup,[DropdownMenu.name]: DropdownMenu,[DropdownItem.name]: DropdownItem,[ActionSheet.name]:ActionSheet,[Button.name]:Button,[Pagination.name]:Pagination,[Cell.name]:Cell},
  data() {
    return {
      category: [],
      imgIndex:0,
      mrtImg:mrtImg,
      imgList: [],
      categoryString: null,
      tableData: [],
      keyword:'',
      fileType:'',
      dialogVisible: false,
      show: false,
      finished: false,
      error: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
        total:0
      },
      page: 1,
      dialog: false,
      originalVideo:'',
      imgPath: this.$API.CrmImagesUrl,
      fileDetail:{},
      pageType:1
    };
  },
  created() {
    this.media_id=this.$route.query.id
    this.pageType=this.$route.query.type
    this.initAjaxMethod();
  },
  methods: {
    handleViews(data,index){
      if(this.fileDetail.type == 0){
        this.dialogVisible=true;
        this.imgIndex=index;
      }else if(this.fileDetail.type == 1){
        this.originalVideo=data.compress_file_path || data.file_path;
			  this.dialog=true;
      }
    },
		originaClose(){
			this.$refs['originaVideo'].pause();
      this.dialog=false;
		},
    handleSizeChange(val) {
      this.query.pageSize=val;
      this.initAjaxMethod();
    },
    handlePageChange(val){
      this.query.pageIndex=val;
      this.initAjaxMethod();
    },
    initAjaxMethod() {
        this.$http.post(this.$API.MEDIA_DETAIL, {
          page: this.query.pageIndex,
          listRows: this.query.pageSize,
          media_id:this.media_id
        })
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data.file_list.data) ? res.data.file_list.data : [];
            let category = Array.isArray(res.data.detail.category) ? res.data.detail.category : [];
            let categoryArr=[]
            category.forEach(item=>{
              if(item.iswarn == 1){
                categoryArr.push(item.title)
              }
            })
            this.tableData = list;
            if(res.data.detail.type == 0){
              this.imgList=list.map(item=>(item.compress_file_path || item.file_path))
            }
            this.query.total=res.data.file_list.total;
            this.fileDetail=res.data.detail;
            this.categoryString=categoryArr.length>0?categoryArr.join('、'):null;
            this.category=category;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    }
  },
  beforeDestroy(){
    window.sessionStorage.removeItem('jqjtIsBack');
  }
};
</script>
<style lang="less" scoped>
.container{
  height: 100%;
  .main{
    width: 70%;
    height: 100%;
    background: #fafafa;
    padding:20px;
  }
  .main-left{
    width:30%;
    height:100%;
    padding:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .main-left-top{
      padding:20px;
      width:100%;
    }
    .main-left-bottom{
      padding:20px;
      width:100%;
    }
    .main-list-group{
      padding:6px 0;
      .main-list-title{
        font-size: 15px;
        color:#333;
        font-weight: bold;
        text-align: right;
        height: 24px;
        line-height: 24px;
      }
      .main-list-res{
        font-size: 14px;
        color:#444;
        height: 24px;
        line-height: 24px;
      }
    }
  }
  .detail-title{
    font-size: 20px;
    font-weight: bold;
    color:#333;
  }
  .detail-text{
    font-size: 16px;
    line-height: 30px;
    color:#333;
    margin-top:10px;
  }
}
.traingplan {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding:0 8px;
}
.traingplan .traingplan-group {
  width: 50%;
  padding:8px;
  box-sizing: border-box;
  font-size: 0;
}
.traingplan dt {
  background: #ffffff;
  box-shadow: 0 12px 20px 0 rgba(0,0,0,.2);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0;
}
.traingplan dl img {
  width: 100%;
  height: 160px;
  object-fit:cover
}
.traingplan dd {
  margin-top: 5px;
  font-size: 13px;
}
.is-warn{
  border:1px solid red!important;
}
.video-groups{
  padding-top:40%;
}
.video-close{
  text-align:center;
  margin-top:40px;
}
</style> 
<style>
  .mobile-resource-detail .van-popup{
    width:100%;
  }
</style>


